<template>
    <div class="app-container">
         
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input placeholder="请输入名称" v-model="searchParam.SEARCH_LIKE_rolename" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">新增</el-button>
            
            <el-popover class="filter-item"  trigger="click"
                placement="top-start"
                width="100">
                 <el-checkbox-group v-model="checkList">
                    <el-checkbox  style="margin:5px 0px"  
                        v-for="column in columns"  :key="column.prop"  :label="column.prop" 
                        :disabled="column.mustFlag===true"  >
                        {{column.label}}  
                    </el-checkbox>
                </el-checkbox-group>
                <el-button  slot="reference"    style="margin-left: 10px;" type="primary" icon="el-icon-check" >选择列</el-button>
            </el-popover>
        </div>


        <!-- 表格-内容区域 -->
        <el-table v-loading="listLoading" :key="tableKey" :data="tableList" border fit highlight-current-row   style="width: 100%;" >
        
            <el-table-column   v-for="column in showColumns"  :key="column.prop" 
                :prop="column.prop" 
                :label="column.label" 
                :width="column.width" 
                :align="column.align?column.align:'center'"
                :min-width="column.minWidth" 
                :sortable="column.sortable" 
                :fixed="column.fixed" 
                :type="column.type" :formatter="column.formatter" >
                <template slot-scope="scope"   >
                    <img   v-if="column.imgFlag==true"   :src="CMBASE.baseFileContext + scope.row[column.prop]" width="60" height="60"  class="img"/>
                    <span v-else-if="column.formatter"> {{column.formatter(scope.row)}}</span>
                    <span v-else>{{scope.row[column.prop]}}</span>
                </template>
            
            </el-table-column>

            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width"  fixed="right" >
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"> 编辑</el-button>
                    <el-button type="danger"  size="mini" @click="handleDelete(scope.row)"> 删除 </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :total="tableTotal" :page.sync="pageRequest.pageNum" :limit.sync="pageRequest.pageSize" @pagination="getList" />

        <!--新增编辑界面-->
        <el-dialog :title="operation?'新增':'编辑'" width="40%" top ="5vh" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="dataForm" label-width="140px" :rules="dataFormRules" ref="dataForm" style="width:85%">
                <el-form-item   v-for="formField in formFields"   :key="formField.prop"  
                    :label="formField.label"   :prop="formField.prop"  >
                    
                    <!--【 type=1】 表单域元素为渲染单选框
                        【使用说明】  
                            此时必传参数dataSource，格式要求  [{'value':'XX','text':'XX'},{'value':'X','text':'X'} ] 
                            例：[{'value':'0','text':'女'},{'value':'1','text':'男'} ]  
                    -->
                    <el-radio-group v-if="formField.type==1"   v-model="dataForm[formField.prop]">
                        <el-radio v-for="(item, index) in formField.dataSource" :label="item.value"  :key="index"  > {{item.text}}</el-radio>
                    </el-radio-group>
                    
                    <!--【 type=2】 表单域元素为图片上传控件
                        【使用说明】  
                            此时必传参数 handleAvatarSuccess   
                    -->
                    <el-upload   v-else-if ="formField.type==2"  
                        v-model="dataForm[formField.prop]"  class="avatar-uploader"
                        :show-file-list="false" :action="CMBASE.baseUploadAction"
                        :on-success="handleAvatarSuccess"  >
                        <img v-if="dataForm[formField.prop]" :src="CMBASE.baseFileContext + dataForm[formField.prop]" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                        <!--【 type=3】 表单域元素为下拉选择框
                        【使用说明】  
                            此时必传参数 options    格式要求  [{'value':'XX','text':'XX'},{'value':'X','text':'X'} ] 
                            例：[{'value':'0','text':'女'},{'value':'1','text':'男'} ] 
                    -->
                    <el-select  v-else-if ="formField.type==3"   v-model="dataForm[formField.prop]" 
                        multiple placeholder="请选择"   size="mini"  style="width:100%"  >
                        <el-option v-for="item in formField.options" :key="item.value"
                            :label="item.text" :value="item.value">
                        </el-option>
                    </el-select>


                    <!-- 默认显示普通文本框 -->
                    <el-input v-else  size="mini" v-model="dataForm[formField.prop]" auto-complete="off"></el-input>
                
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="closeDialog()"  >取消</el-button>
                <el-button size="mini" @click.native="saveFormData()" :loading="editLoading"   type="primary"  >提交</el-button>
            </div>
        </el-dialog>
        
        
        

    </div>
</template>

<script>

import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import chooseColumn from '@/mixin/chooseColumn'

export default {
    name: 'product-brand',
    components: { Pagination },
    directives: { waves },
    filters: { },
    mixins:[ chooseColumn ],
    data() {
        return {
            tableKey: 0,
            tableList: [],//表格数据源
            tableTotal: 0,//表格总条数数据
            listLoading: true,
            pageRequest: { pageNum: 1, pageSize: 10, },
            searchParam:{ SEARCH_LIKE_rolename:''},
            dialogFormVisible: false,//默认不显示弹出框
            operation: true, // true:新增, false:编辑
            editLoading: false,//保存表单时loading框
            columns: [
                { prop: 'id',  label: '主键id',  sortable:false , showFlag:false  },
                { prop: 'name',  label: '参数名称',  sortable:false ,  showFlag:true , mustFlag:true  },
                { prop: 'code',  label: '编码',  sortable:false ,  showFlag:true  },
                { prop: 'value',  label: '系统参数值',  sortable:false ,  showFlag:true  },
                { prop: 'remark',  label: '备注',  sortable:false ,  showFlag:true  },
                { prop: 'createTime',  label: '创建时间',  sortable:false ,  showFlag:false   },
            ],
            formFields: [
                {prop: 'name',  label: '参数名称',  sortable:false  },
                {prop: 'code',  label: '编码',  sortable:false  },
                {prop: 'value',  label: '系统参数值',  sortable:false  },
                {prop: 'remark',  label: '备注',  sortable:false  },
            ],
            // 新增编辑界面数据
            dataForm: {},
            //表单检验规则
            dataFormRules: {
                name: [ { required: true, message: '请输入参数名称', trigger: 'blur' } ],
                code: [ { required: true, message: '请输入编码', trigger: 'blur' } ],
                value: [ { required: true, message: '请输入系统参数值', trigger: 'blur' } ],
            },
        }
    },
    created() {
        this.getList();
    },
  methods: {
    //获取表格数据
    getList() {
        this.listLoading = true
        //【API请求】----获取用户列表数据
        this.$api.getSysConfigList(this.pageRequest).then(response => {
            this.tableList = response.data.content
            this.tableTotal = response.data.total
            this.listLoading = false;
        }).catch((res) => {
            this.$message({  message: '用户列表获取失败', type: 'error' })
        })
    },
    //表格数据筛选
    handleFilter() {
        this.pageRequest = {
            pageNum: 1,
            pageSize: 10,
        }
        this.pageRequest.searchParam = this.searchParam
        this.getList()
    },
    //【按钮点击】--- 弹出新增表单
    handleCreate() {
        this.operation = true;
        this.initDataForm();;
        this.dialogFormVisible = true
        this.checkedIds = [];
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
          this.editLoading = false;
        })
    },
    //【按钮点击】--- 弹出编辑表单
    handleUpdate(row) {
        this.operation = false; 
        this.dataForm = Object.assign({}, row)
        //显示编辑菜单
        this.dialogFormVisible = true
        this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
            this.editLoading = false;
        })

    },
    //保存表单数据
    saveFormData() {
        this.$refs['dataForm'].validate((valid) => {
            if (!valid) {
              return false;
            }
            this.editLoading = true;
            //【API请求】----保存数据
            this.$api.saveSysConfigInfo(this.dataForm).then(() => {
                this.editLoading = false;//关闭loading框
                this.dialogFormVisible = false;//关闭表单页面
                this.initDataForm();//重置表单数据
                this.getList();//重新获取表格数据
                this.$notify({ title: '成功',  message: '保存成功', type: 'success', duration: 2000 })
            })
        })
    },
    //【按钮点击】---删除行
    handleDelete(row) {
        this.$confirm('确认删除该记录吗？', '提示', {}).then(() => {
            //【API请求】---- 删除数据  
            this.$api.deleteSysConfigInfo({ids:row.id}).then(() => {
                this.$message({  message: '操作成功', type: 'success' })
                this.pageRequest.pageNum = 1
                this.getList();
            })
        }).catch(() => {
        });
    },
    //初始化表单数据，重新渲染
    initDataForm(){
        this.dataForm = {
			id: '' ,
			name: '' ,
			code: '' ,
			value: '' ,
			remark: '' ,
        };
    },
    //关闭表单弹出框
    closeDialog(){
        this.$refs['dataForm'].resetFields();
        this.dialogFormVisible = false
    }
     
  }
     
     
}
</script>